<!-- @format -->

<template>
  <!-- 一单成生成结果页面 -->
  <view class="orderResult">
    <child-header-bar
      :childTitle="childTitle"
      @getMarginTop="getMarginTop"></child-header-bar>
    <view class="orderResult-content" :style="[{ top: top + 'px' }]">
      <!-- 头部两个按钮 -->
      <view class="or-top-btns">
        <view class="title">{{ order.slopeName }}</view>
        <view class="address">{{ order.oneOrderTitle }}</view>

        <view class="trip">
          <view class="share">
            <button class="ortopShareBtn" open-type="share" hover-class="none">
              分享行程
            </button>
          </view>
          <view class="delect">
            <button class="ortopShareBtn" @tap="deleteTrip" hover-class="none">
              删除行程
            </button>
          </view>
        </view>
      </view>

      <!-- 出行方式 -->
      <view class="or-travle-way">
        <view class="ortw-title">
          出行方式——{{
            way == 1 ? '专线大巴/公交' : way == 2 ? '租车/包车' : '自驾'
          }}
        </view>
        <view
          class="ortw-content"
          :style="way == 2 ? 'background: transparent;' : ''">
          <!-- 大巴 -->
          <view class="travel-box" v-if="way == 1">
            <rich-text
              v-if="shuttleBusInfo !== null"
              :nodes="shuttleBusInfo"></rich-text>
          </view>
          <!-- 出租包车 -->
          <view class="taxi-box" v-else-if="way == 2">
            <view class="hotel-box">
              <view
                class="hotel-item"
                @click="toStoreIntro('hotel', item.bussinessId)"
                v-for="(item, index) in travelModalList"
                :key="index">
            

                <view class="hi-content">
                  <view class="hi-name">
                    {{ item.bussinessName }}
                  </view>
				  			<view style="display: flex;flex-wrap: wrap;margin-top: 10rpx;">
				  <view class="hi-distance" v-if="item.distanceOf != undefined">
				    距离滑雪场{{ item.distanceOf }}公里
				  </view>
                  <view class="label-items">
                    {{ item.tag }}
                  </view>
  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 自驾 -->
          <view class="by-car-box" v-else v-for="item in skiSlopeList">
            <view class="bcb-address">
              {{ item.city }}
              <view class="" style="margin: 0 6rpx"> | </view
              >{{ item.slopeName }}
            </view>
            <view class="bcb-position">
              <view class="bcbp-position" @click="toPosition(item)">
                <image
                  src="../../static/storeIntro/position.png"
                  mode=""></image>
                <view class="bcbp-title"> 导航 </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 门票信息 -->
      <view class="or-tickets">
        <view class="ort-title"> 门票信息 </view>
        <view class="ort-content">
          <view class="tickets-box">
            <rich-text :nodes="ticketPrice"></rich-text>
            <!-- <view class="tickets-item" v-for="(item, index) in ticketsList" :key="index">
              <view class="t-title">
                {{item.title}}
              </view>
              <view class="t-price">
                ￥{{item.price}}元
              </view>
            </view> -->
          </view>
        </view>
      </view>
      <!-- 长春酒店 -->
      <view class="or-hotel">
        <view class="orh-title">
          <view class="">{{skiSlopeList[0].city}}酒店 </view>
		       <!-- 
          <view class="more-box" @click="toEasyClearHotel">
      <view class="mb-text"> 更多 </view> 
            <view class="mb-more">
              <image
                src="/myPackageA/static/easyClear/more.png"
                mode=""></image>
            </view>
          </view>
		  -->
        </view>
        <view class="orh-content">
          <view class="hotel-box">
            <view
              class="hotel-item"
              @click="toStoreIntro('zhusu', item.bussinessId)"
              v-for="(item, index) in hotelList"
              :key="index">

              <view class="hi-content">
                <view class="hi-name">
                  {{ item.bussinessName }}
                </view>
				
				<view style="display: flex;flex-wrap: wrap;margin-top: 10rpx;">
					<view class="hi-distance" v-if="item.distanceOf != undefined">
					  距离滑雪场{{ item.distanceOf }}公里
					</view>
			   <view class="label-items" v-for="(item1,index) in item.tag" :key="index">
				 {{item1}}
			   </view>
				</view>

              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 长春美食 -->
      <view class="or-foods">
        <view class="orf-title">
          <view class="">{{skiSlopeList[0].city}}美食 </view>
		  
		      <!--
          <view class="more-box" @click="toEasyClearFood">
            <view class="mb-text"> 更多 </view>
            <view class="mb-more">
              <image
                     src="/myPackageA/static/easyClear/more.png"
                mode=""></image>
            </view>
          </view>
		  -->
		  
        </view>
        <view class="orf-content">
          <view class="food-box">
            <view
              class="food-item"
              @click="toStoreIntro('canyin', item.bussinessId)"
              v-for="(item, index) in foodList"
              :key="index">
			  <view class="fi-content">
			           <view class="fi-name">
			             {{ item.bussinessName }}
			           </view>
				
					 
				
			  <view style="display: flex;flex-wrap: wrap;margin-top: 10rpx;">
				  <view class="hi-distance" v-if="item.distanceOf != undefined">
				    距离滑雪场{{ item.distanceOf }}公里
				  </view>
			  <view class="label-items"  v-for="(item1,index) in item.tag" :key="index">
			  				 {{item1}}
			  </view>
			  				</view>
			         </view>
       

            </view>
          </view>
        </view>
      </view>
      <!-- 推荐景点 -->
	  <!-- 
      <view class="or-spots" v-if="slotShow">
        <view class="ors-title">
          根据您的行程安排，您有充足的时间，可以考虑去#城市#的其他景点游玩
        </view>
        <view class="ors-content">
          <view class="spots-box">
            <view              class="spots-item"              v-for="(item, index) in spotsViewList"              :key="index">
              <rich-text :nodes="item.attractionsDescribe"></rich-text>
              <!-- <view class="spot-name">
                推荐景点{{index + 1}}: {{item.attractionsName}}
              </view>
              <view class="spot-img">
                <image :src="item.imgUrl" mode=""></image>
              </view> 
            </view>
    
          </view>
        </view>
      </view>
	  -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {}, //传过来的数据
      way: 2,
      isFold: false,
      tabIndex: -1,
      top: 0, //距离顶部距离
      slotShow: true, //显示景点，但是用户选择一天，当前模块不展示，默认展示true
      childTitle: '行程详情', //标题
      planList: [], //方案列表
      shuttleBusInfo: '', //大巴线路富文本
      travelModalList: [], //出行方向-租车
      ticketPrice: '', //门票信息富文本
      ticketsList: [], //门票列表
      hotelList: [], //酒店列表
      foodList: [], //美食列表
      spotsViewList: [], //景点截断
      // 景点
      spotsList: [], //景点完整数据
      oneOrderId: 0,
      skiSlopeList: [],
      order: {},
      title: '',
	  img:''
    }
  },
  watch: {
    // 判断数据是否为折叠状态
    isFold(item1, item2) {
      // item1为新值，item2为旧值
      // 如果isFold是true，为折叠状态，数据取前两条
      if (item1) {
        this.spotsViewList = this.spotsList
      } else {
        this.spotsViewList = this.spotsList.slice(0, 2)
      }
    },
  },
  onShow() {
    this.spotsViewList = this.spotsList.slice(0, 2)
  },

  onLoad(options) {
    this.title = options.title
    this.img = this.getImage(options.img)
	console.log('++++++++++++++')
	console.log(options)
	this.slopeId=options.slopeId
    // this.getList(options.oneOrderId)
    // let params =
    //   '{"questionOne":"长春市","questionTwo":"高手","questionThree":"1000以上","questionFour":"火锅","questionFive":"专线大巴","questionSix":"2天","questionSeven":"是"}'
    // this.params = JSON.parse(params)
    // this.getData()
    // if (options.params) {
    //   this.params = JSON.parse(options.params)
    // }
    this.getData(options.oneOrderId)
	
    this.oneOrderId = options.oneOrderId
  },
  methods: {
	  getImage(titleImg) {
	    if (titleImg && titleImg.includes(",")) {
	      let imageList = titleImg.split(",");
	      return imageList[0];
	    } else {
	      return titleImg
	    }
	  },
    onShareAppMessage() {
      return {
        title: this.title,
        imageUrl: this.img,
      }
    },
    onShareTimeline() {
      return {
        title: this.title,
        imageUrl: this.img,
      }
    },
    // 获取数据
    getData(oneOrderId) {
      let _this = this
      _this.shuttleBusInfo = ''
      _this.ticketPrice = ''
      _this.hotelList = []
      _this.foodList = []
      _this.spotsList = []
      _this.spotsViewList = []

      uni.request({
        url: _this.$httpApi.install.orderDetail + oneOrderId,
        method: 'GET',
        // data: _this.params,
        success(res) {
          if (res.data.code == 200) {
			     console.log('===============================')
            console.log(res.data.data)
            _this.order = res.data.other
            _this.shuttleBusInfo = res.data.data.shuttleBusInfo //出行路线-大巴
           _this.travelModalList = res.data.data.travelModalList // 出行路线-租车
            // _this.getTag(res.data.data.travelModalList) //获取租车tag的信息
            //_this.skiSlopeList = res.data.data.skiSlopeList //出行路线-自驾
			

			res.data.data.skiSlopeList.forEach((item) => {
		
			  if (item.slopeId == _this.slopeId) {
			   _this.skiSlopeList[0] = item
			  }
			})
			/*
			if(res.data.data.shuttleBusInfo!=null)
			{
			res.data.data.shuttleBusInfo.forEach((item) => {
					
			  if (item.slopeId == _this.slopeId) {
			   _this.shuttleBusInfo[0] = item
			  }
			})	
			}
			if(res.data.data.travelModalList!=null){
			res.data.data.travelModalList.forEach((item) => {
					
			  if (item.slopeId == _this.slopeId) {
			   _this.travelModalList[0] = item
			  }
			})	
			}
			*/
		
			console.log('BBBBBB')
			console.log(_this.skiSlopeList)
            _this.getTicketPrice(res.data.data.skiSlopeList) //获取门票信息
            _this.hotelList = res.data.data.bussinessStayList //获取酒店信息
            _this.getTag(res.data.data.bussinessStayList) //获取酒店tag的信息
            _this.foodList = res.data.data.bussinessFoodList //获取餐饮信息
            _this.getTag(res.data.data.bussinessFoodList) //获取餐饮tag信息
            _this.spotsList = res.data.data.attractionsList //获取景点信息
            if (_this.travelModalList != null) {
              _this.way = 2
            } else if (
              _this.shuttleBusInfo != null ||
              _this.shuttleBusInfo != '' ||
              _this.shuttleBusInfo != undefined
            ) {
              _this.way = 1
            }
            if (_this.shuttleBusInfo == null && _this.travelModalList == null) {
              _this.way = 3
            }
            if (_this.spotsList.length > 1) {
              _this.spotsViewList = _this.spotsList.slice(0, 1) //展示前两条景点信息
            } else {
              _this.spotsViewList = _this.spotsList
            }
          } else {
            console.log(res.msg)
          }
        },
        fail(error) {},
      })
    },

    deleteTrip() {
      wx.showModal({
        title: '提示',
        content: '您确定要删除吗',
        success: (res) => {
          if (res.confirm) {
            wx.request({
              url: this.$httpApi.install.orderDelete + this.oneOrderId,
              method: 'DELETE',
              success(res) {
                uni.showToast({ icon: 'success', title: '删除成功~' })
                uni.navigateTo({
                  url: '/myPackageA/pages/trip/index',
                })
              },
            })
          } else {
            //这里是点击了取消以后
            console.log('用户点击取消')
          }
        },
      })
    },
    // 点击切换tab
    tabChange(index) {
      console.log('切换点击' + this.tabIndex)
      this.params.slopeId = index
      this.tabIndex = index
      console.log(this.params)
      this.getData()
    },
    // 保存当前行程
    saveItinerary() {
      let _this = this
      let saveParam = _this.params
      if (!_this.params.slopeId) {
        saveParam.slopeId = _this.tabIndex
      }
      saveParam.userId = 1
      uni.request({
        url: _this.$httpApi.install.saveOrderSuccess,
        method: 'POST',
        data: _this.params,
        success(res) {
          if (res.data.code == 200) {
            uni.showToast({
              title: '已保存当前行程',
              icon: 'success',
            })
          } else {
            console.log(res.msg)
          }
        },
        fail(error) {},
      })
      console.log(saveParam)
    },
    // 获取到用户出行时间
    getDays() {
      let _this = this
      if (_this.params.questionSix == '1天') {
        _this.slotShow = false
      }
      console.log(_this.slotShow)
    },
    // 获取门票信息
    getTicketPrice(list) {
      let list1 = ''
      list.forEach((item) => {
        list1 = item
        if (item.slopeId == this.order.slopeId) {
          this.ticketPrice = list1.ticketPrice
        }
      })

      // let list1 = list.find((item) => item.slopeId == this.tabIndex)
    },
    // 获取酒店标签
    getTag(list) {
		console.log(list)
      if (list.length > 0 ) {
        list.forEach((item) => {
          if (item.tag !== null) {
            item.tag = item.tag.split(',')
            item.childTag = item.tag.slice(1)
          }
        })
      }
    },
    // 跳转到一门清酒店列表
    toEasyClearHotel() {
      uni.navigateTo({
        url:
          '/myPackageA/pages/easyClearOthers/easyClearOthers?type=' + 'hotel',
      })
    },
    // 跳转到一门清美食列表
    toEasyClearFood() {
      uni.navigateTo({
        url: '/myPackageA/pages/easyClearOthers/easyClearOthers?type=' + 'food',
      })
    },
    // 导航点击
    toPosition(value) {
      // 测试数据
        if (!value.positionX || !value.positionY) {
          uni.showToast({
            title: '暂无导航数据',
          })
          return
        }
       // let pos = this.slopeIntro.position.split(',')
        let lat = value.positionY
        let lng = value.positionX
        //打开地图，并将门店位置传入
        uni.getLocation({
			 type: 'gcj02',
          success: (res) => {
	
		console.log(value.slopeName,value.address)
            uni.openLocation({
              latitude: parseFloat(lat),
              longitude: parseFloat(lng),
			  name:value.slopeName,
			  address:value.address,
              scale: 17,
            })
          },
		  fail(e){
			  console.log(e)
		  },
        })
    },
    // 跳转到商家介绍
    toStoreIntro(type, id) {
      uni.navigateTo({
        url:
          '/myPackageA/pages/storeIntro/storeIntro?type=' +
          type +
          '&businessId=' +
          id,
      })
    },
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150
    },
  },
}
</script>
<style>
page {
  width: 100%;
  height: 100%;
  background-color: #f8fafe;
}
</style>
<style lang="scss">
button {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  line-height: normal;
  font-size: 28rpx;
  margin-top: 6rpx;
}

button::after {
  border: none;
}
  .hi-distance {

		    bottom: 10rpx;
		    left: 10rpx;
		    padding: 5rpx 17rpx;
		    background: #303030;
		    border-radius: 18rpx 18rpx 18rpx 18rpx;
		  
		    font-size: 24rpx;
		    color: #88f79c;
		  }
.orderResult-content {
  position: absolute;
  padding: 0 30rpx;
  padding-bottom: 38rpx;

  // 头部两个按钮
  .or-top-btns {
    // display: flex;
    // justify-content: space-between;
    width: 690rpx;
    height: 226rpx;
    background: linear-gradient(360deg, #ffffff 0%, #d8e1ff 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    margin-top: 20rpx;
    background-color: red;
    padding-top: 40rpx;
    .title {
      font-size: 32rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      color: #303030;
      line-height: 40rpx;
      margin-left: 40rpx;
    }
    .address {
      font-size: 24rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #595959;
      margin-left: 40rpx;
      margin-top: 20rpx;
    }
    .trip {
      display: flex;
      margin-left: 40rpx;
      margin-top: 20rpx;
      .share {
        width: 155rpx;
        height: 50rpx;
        background: #c7d3fe;
        border-radius: 25rpx 25rpx 25rpx 25rpx;
        opacity: 1;
        text-align: center;
      }
      .delect {
        margin-left: 40rpx;
        width: 155rpx;
        height: 50rpx;
        background: #ff4e00;
        border-radius: 25rpx 25rpx 25rpx 25rpx;
        opacity: 1;
        text-align: center;
      }
      text {
        width: 112rpx;
        height: 28rpx;
        font-size: 28rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        color: #303030;
      }
    }

    image {
      width: 340rpx;
      height: 124rpx;
      border-radius: 40rpx;
    }
  }

  // 提示文字
  .or-tips {
    width: 690rpx;
    height: 46rpx;
    line-height: 46rpx;
    background: #eff1f4;
    border-radius: 23rpx;
    padding-left: 38rpx;
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #595959;
    position: relative;

    &::before {
      content: '';
      width: 0px;
      height: 0px;
      border-top: 8rpx solid transparent;
      border-bottom: 8rpx solid transparent;
      border-left: 8rpx solid #69e39f;
      // background: #69E39F;
      position: absolute;
      top: 50%;
      left: 20rpx;
      transform: translateY(-50%);
    }
  }

  // 三个方案
  .or-plans {
    margin-top: 20rpx;
    display: flex;

    .or-active {
      .plan-index {
        background: #88f79c !important;
        color: #303030 !important;
      }

      .plan-content {
        background: #303030 !important;
        color: #ffffff !important;
      }
    }

    .or-plans-list-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 8rpx;

      .plan-index {
        width: 149rpx;
        height: 59rpx;
        background: #d1d1d1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        font-size: 24rpx;
        color: #fff;
        text-align: center;
        padding-top: 4rpx;
      }

      .plan-content {
        width: 223rpx;
        height: 113rpx;
        background: #eff1f4;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 1rpx solid #d1d1d1;
        margin-top: -20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 32rpx;
        font-weight: 500;
        color: #a4a4a4;

        .pc-slope {
          font-weight: 500;
        }
      }
    }
  }

  // 出行方式
  .or-travle-way {
    margin-top: 25rpx;

    .ortw-title {
      width: 690rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: linear-gradient(90deg, #b5c3f3 0%, #fad9f1 100%);
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      color: #595959;
      padding-left: 50rpx;
      position: relative;

      &::before {
        content: '';
        width: 9rpx;
        height: 32rpx;
        background: #595959;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .ortw-content {
      background: #ffffff;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      padding-top: 30rpx;

      .travel-box {
      }

      .taxi-box {
        .hotel-box {
          display: flex;
          justify-content: space-between;

          .hotel-item {
            background: #ffffff;
            padding-bottom: 30rpx;
            border-radius: 20rpx;
          width: 335rpx;
		
            .ht-img {
              width: 335rpx;
              height: 377rpx;
              background: #d6d6d6;
              border-radius: 20rpx 20rpx 0rpx 0rpx;
              position: relative;

              image {
                width: 100%;
                height: 100%;
                border-radius: 20rpx 20rpx 0rpx 0rpx;
              }

           
            }

            .hi-content {
              padding-left: 16rpx;

              .hi-name {
                font-size: 24rpx;
                font-weight: bold;
                margin-top: 10rpx;
                color: #464646;
              }

              .hi-grade {
           background: #eff1f4;
           border-radius: 18rpx 18rpx 18rpx 18rpx;
           font-size: 20rpx;
           font-family: Source Han Sans CN, Source Han Sans CN;
           font-weight: 400;
           color: #91a4b2;
           padding: 4rpx 16rpx;
           margin-right: 10rpx;
              }

              .hi-label {
                display: flex;
                margin-top: 10rpx;

                .label-item {
                  background: #eff1f4;
                  border-radius: 18rpx 18rpx 18rpx 18rpx;
                  font-size: 20rpx;
                  font-family: Source Han Sans CN, Source Han Sans CN;
                  font-weight: 400;
                  color: #91a4b2;
                  padding: 4rpx 16rpx;
                  margin-right: 10rpx;
                }
              }
            }
          }
        }
      }

      .by-car-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bcb-address {
          display: flex;
          font-size: 22rpx;
          color: #595959;
          padding-left: 48rpx;
        }

        .bcb-position {
          margin-top: 30rpx;
          image {
            width: 20rpx;
            height: 20rpx;
          }

          .bcbp-title {
            font-size: 24rpx;
            font-weight: bold;
            color: #464646;
            margin-left: 5rpx;
          }

          .bcbp-position {
            width: 101rpx;
            height: 34rpx;
            background: linear-gradient(
              90deg,
              rgba(93, 135, 237, 0.15) 0%,
              rgba(239, 241, 244, 0.15) 100%
            );
            border-radius: 17rpx 17rpx 17rpx 17rpx;
            display: flex;
            align-items: center;
            padding-left: 15rpx;
            margin-right: 20rpx;
          }
        }
      }
    }
  }

  // 门票信息
  .or-tickets {
    margin-top: 25rpx;

    .ort-title {
      width: 690rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: linear-gradient(90deg, #f6d1c1 0%, #ffd5f5 100%);
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      color: #595959;
      padding-left: 50rpx;
      position: relative;

      &::before {
        content: '';
        width: 9rpx;
        height: 32rpx;
        background: #595959;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .ort-content {
      background: #ffffff;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      padding-top: 30rpx;

      .tickets-box {
        // padding-left: 55rpx;
        padding-bottom: 10rpx;

        .tickets-item {
          margin-bottom: 30rpx;

          .t-title {
            font-size: 24rpx;
            color: #595959;
            font-weight: 600;
          }

          .t-price {
            font-weight: 600;
            font-size: 24rpx;
            color: #ff4e00;
          }
        }
      }
    }
  }

  // 长春酒店
  .or-hotel {
    margin-top: 25rpx;

    .orh-title {
      width: 690rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: linear-gradient(90deg, #b5f3dd 0%, #d9edfa 100%);
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      color: #595959;
      padding-left: 50rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &::before {
        content: '';
        width: 9rpx;
        height: 32rpx;
        background: #595959;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .orh-content {
      // background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      padding-top: 11rpx;

      .hotel-box {
        display: flex;


        .hotel-item {
          background: #ffffff;
          padding-bottom: 30rpx;
          border-radius: 20rpx;
		width: 50%;
          .ht-img {
            width: 335rpx;
            height: 377rpx;
            background: #d6d6d6;
            border-radius: 20rpx 20rpx 0rpx 0rpx;
            position: relative;

            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx 20rpx 0rpx 0rpx;
            }

            .hi-distance {
              position: absolute;
              bottom: 10rpx;
              left: 10rpx;
              padding: 5rpx 17rpx;
              background: #303030;
              border-radius: 18rpx 18rpx 18rpx 18rpx;

              font-size: 24rpx;
              color: #88f79c;
            }
          }

          .hi-content {
            padding-left: 16rpx;

            .hi-name {
              font-size: 24rpx;
              font-weight: bold;
              margin-top: 10rpx;
              color: #464646;
            }

            .hi-grade {
              margin-top: 10rpx;
              width: 78rpx;
              height: 30rpx;
              // padding: 4rpx 12rpx;
              background: #eff1f4;
              border-radius: 18rpx 18rpx 18rpx 18rpx;
              font-size: 20rpx;
              color: #ff4e00;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .hi-label {
              display: flex;
              margin-top: 10rpx;

              .label-item {
                background: #eff1f4;
                border-radius: 18rpx 18rpx 18rpx 18rpx;
                font-size: 20rpx;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                color: #91a4b2;
                padding: 4rpx 16rpx;
                margin-right: 10rpx;
              }
            }
          }
        }
      }
    }
  }

  .more-box {
    display: flex;
    align-items: center;
    padding-right: 23rpx;

    .mb-text {
      font-size: 24rpx;
      color: #595959;
    }

    .mb-more {
      margin-left: 16rpx;

      width: 32rpx;
      height: 32rpx;
      background: #bcc0c5;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      image {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }

  // 长春美食
  .or-foods {
    margin-top: 25rpx;

    .orf-title {
      width: 690rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: linear-gradient(90deg, #f3f3b5 0%, #fae4d9 100%);
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      color: #595959;
      padding-left: 50rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &::before {
        content: '';
        width: 9rpx;
        height: 32rpx;
        background: #595959;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .orf-content {
      // background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      padding-top: 11rpx;
      display: flex;
      flex-direction: column;

      .food-box {
        display: flex;
        justify-content: space-between;

        .food-item {
          background: #ffffff;
          border-radius: 20rpx;
          padding-bottom: 30rpx;
          width: 335rpx;
          .fi-img {
            border-radius: 20rpx;
            position: relative;
			margin:5rpx;
            .fi-distance {

              bottom: 10rpx;
              left: 10rpx;
              padding: 5rpx 17rpx;
              background: #303030;
              border-radius: 18rpx 18rpx 18rpx 18rpx;

              font-size: 24rpx;
              color: #88f79c;
            }
          }

          .fi-content {
            padding-left: 16rpx;

            .fi-name {
              margin-top: 10rpx;
              font-size: 24rpx;
              font-weight: bold;
              color: #464646;
            }

            .fi-grade {
              margin-top: 10rpx;
              width: 78rpx;
              height: 30rpx;
              display: block;
              padding: 4rpx 12rpx;
              background: #eff1f4;
              border-radius: 18rpx 18rpx 18rpx 18rpx;
              font-size: 20rpx;
              color: #ff4e00;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .fi-label {
              display: flex;
              margin-top: 10rpx;

              .label-item {
                background: #eff1f4;
                border-radius: 18rpx 18rpx 18rpx 18rpx;
                font-size: 20rpx;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                color: #91a4b2;
                padding: 4rpx 16rpx;
                margin-right: 10rpx;
              }
            }
          }
        }
      }
    }
  }

  // 推荐景点
  .or-spots {
    margin-top: 25rpx;

    .ors-title {
      width: 690rpx;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      padding-right: 30rpx;
      background: linear-gradient(90deg, #fce5ff 0%, #d9ecfa 100%);
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      color: #595959;
      padding-left: 50rpx;
      position: relative;
      overflow-wrap: break-word;

      &::before {
        content: '';
        width: 9rpx;
        height: 32rpx;
        background: #595959;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .ors-content {
      background: #ffffff;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      padding-top: 10rpx;
      padding-bottom: 30rpx;

      .spots-box {
        padding-left: 20rpx;
        position: relative;

        .unfold {
          position: absolute;
          right: 20rpx;
          bottom: 0;
          font-size: 24rpx;
          color: #5d87ed;
        }

        .spots-item {
          margin-top: 20rpx;

          .spot-name {
            font-size: 24rpx;
            color: #595959;
          }

          .spot-img {
            width: 518rpx;
            height: 348rpx;
            border-radius: 20rpx;
            margin-top: 20rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
            }
          }
        }
      }
    }
  }
}
       .label-items {
                background: #eff1f4;
                border-radius: 18rpx 18rpx 18rpx 18rpx;
                font-size: 20rpx;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                color: #91a4b2;
                padding: 4rpx 16rpx;
               margin: 5rpx 2rpx;
   
              }
  [alt]{
  	max-width:100%;
  }
</style>
